<template>
  <div class="w100 screan-container flex pt8 pb8 pl8 pr8">
    <div class="anchor-info-container flex mr8">
      <el-avatar :size="44" :src="circleUrl" class="mr8" />
      <div class="info">
        <p>主播名称：<span>无</span></p>
        <p>
          观看数量：<span>{{ liveInfo.viewers }}</span>
        </p>
      </div>
    </div>
    <div class="screan-input mr8">
      <el-input class="h-full" placeholder="请输入直播链接" v-model="liveUrl" />
    </div>
    <div class="action-container">
      <el-button size="default" type="primary" @click="encodeLive()" :loading="analysisLoading" v-if="code !== 0">
        <el-icon v-if="!analysisLoading">
          <ele-Position />
        </el-icon>
        解析直播
      </el-button>
      <el-button size="default" type="primary" @click="websocket && websocket!.close()" v-if="code === 0">
        <el-icon>
          <ele-Position />
        </el-icon>
        断开链接
      </el-button>
    </div>
  </div>
  <div class="waterfall-container">
    <div class="waterfall-last">
      <div class="waterfall-last-item" style="grid-column: auto / span 8">
        <div class="h100">
          <TrumpetSet />
          <ShareSet class="mt-2 mb-2" />
          <ImportSpeakSet />
        </div>
      </div>
      <div class="waterfall-last-item" style="grid-column: auto / span 8">
        <div class="w100 h100">
          <BatchSpeakSet />
          <SerialNumberSet class="mt-2 mb-2" />
          <ProblemSet />
        </div>
      </div>
      <div class="waterfall-last-item" style="grid-column: auto / span 8">
        <div class="w100 h100">
          <AttentionSet />
          <TermSet class="mt-2 mb-2" />
          <CommentList />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import TrumpetSet from '@/components/home/trumpet-set.vue';
import ShareSet from '@/components/home/share-set.vue';
import ProblemSet from '@/components/home/problem-set.vue';
import AttentionSet from '@/components/home/attention-set.vue';
import TermSet from '@/components/home/term-set.vue';
import CommentList from '@/components/home/comment-list.vue';
import ImportSpeakSet from '@/components/home/import-speak-set.vue';
import BatchSpeakSet from '@/components/home/batch-speak-set.vue';
import SerialNumberSet from '@/components/home/serial-number-set.vue';
import { useAnalysisLiveHook, useDecodeMsgHook } from '@/hooks/proto/msg-hook';
import { code, liveInfo, useLiveStatusHook } from '@/hooks/proto/status/live-status-hook';
import { ElNotification } from 'element-plus';
import { ref, provide } from 'vue';
import '@/theme/index.scss';

import { useCloseSelect } from '@/hooks/demo/closeSeleectHooks';
useCloseSelect(['.el-scrollbar__wrap']);

provide('liveInfo', liveInfo);

const wsUrl = 'ws://119.91.61.82/api/live_connect';
const circleUrl = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';

// 解析直播
const liveUrl = ref(
  'https://mobile.yangkeduo.com/transac_virtual_card_pwd.html?room_id=229653266&_x_query=%E7%9B%B4%E6%92%AD&if_h265=false&refer_share_channel=copy_link&use_hub=1&eavc_list_id=ribbuhwl3mh3538y29yqm&_wvx=10&mall_id=665152551&sceneId=1&hub_type=hub%2Fzb_red%2Fweak&_live_toast_type=3&location_required=0&_live_toast_options=8&play_url=http%3A%2F%2Flive-adapt.pddpic.com%2Flive%2F17283_production_sprite_20220723_229653266_06_720p.flv%3FtxSecret%3D706c75e82e28de35e56055df8eca9e30%26txTime%3D62dce1e2%26pub_type%3Dbd2-iOS-s2%26srcSet%3Ds2&eavc_p_rec=eyJvcmciOiJ4cmVjIiwic2hvd19pZCI6IjIwMjIwNzIzXzIyOTY1MzI2Nl8wNiIsImZyb21fc2NlbmVfaWQiOiJudWxsIiwicmVxdWVzdF9pZCI6IjIxMzI1NmZkLWQ2MDYtNDQ3Ny1iMzE5LWRmZWQ4Y2Y5ZTY5NSIsInRzIjoxNjU4NTcwOTE0ODU5fQ%3D%3D&refer_share_id=P67JUyBdrWe0Ov1eaolecjjdk5kl7a0d&biz_type=0&scene_id=13&refer_share_uin=6CVLREWZ6MB5NNB744GYXYKBGY_GEXDA&if_soft_h265=false&melon_sps_pps=AWQAH%2F%2FhABhnZAAfrOwLQKGhAAADAAEAAAMAPA8SJTgBAARo6u8s&page_from=601129&_live_feed_id=20220723_229653266_06&sceneType=0&container_hub_type=hub%2Fzb_red%2Fweak&_x_org=1&_wv=41729&low_latency=false&hubOffset=1&_x_share_id=P67JUyBdrWe0Ov1eaolecjjdk5kl7a0d&refer_page_name=yhzb_bfy&refer_page_id=31430_1658570912399_onmdne7jvh&refer_page_sn=31430'
);
const websocket = ref<WebSocket>();
const encodeLive = () => {
  initWebsocket();
};

const analysisLoading = ref<boolean>(false);
const initWebsocket = async () => {
  analysisLoading.value = true;
  if (websocket.value) websocket.value!.close();
  const { msgBuffer } = await useAnalysisLiveHook({ url: liveUrl.value });
  // 调试base64转码
  // console.log(uint8arrayToBase64(msgBuffer.value as Uint8Array))
  websocket.value = new WebSocket(wsUrl);
  websocket.value.onopen = () => {
    analysisLoading.value = false;
    websocket.value!.send(msgBuffer.value!);
  };
  websocket.value.onclose = () => {
    analysisLoading.value = false;
    code.value = null;
  };
  websocket.value.onmessage = ({ data }) => {
    const reader = new FileReader();
    reader.readAsArrayBuffer(data);
    reader.onload = async (arrayBuffer) => {
      const decodeData = (await useDecodeMsgHook({
        uint8Array: new Uint8Array((arrayBuffer as { target: { result: ArrayBuffer } }).target.result)
      })) as any;
      if (decodeData) {
        await useLiveStatusHook(decodeData);
      }
    };
  };
  websocket.value.onerror = () => {
    analysisLoading.value = false;
    code.value = null;
    ElNotification({
      title: '连接提示',
      message: '连接错误！请联系管理员处理。',
      type: 'error'
    });
  };
};
</script>

<style lang="scss" scoped>
.screan-container {
  background: #fff;
  position: sticky;
  width: 100%;
  top: 51px;
  z-index: 999;
  border-bottom: 1px solid #f1f2f3;

  .anchor-info-container {
    .info p {
      line-height: 22px;
      color: var(--next-text-color-regular);

      span {
        color: #e60c19;
      }
    }
  }

  .screan-input {
    flex: 1;
  }

  .action-container {
    .el-button {
      height: 100%;
    }
  }
}

.waterfall-container {
  flex: 1;
  overflow: auto;
  padding: 0.5em;
  max-width: 1440px;
  margin: auto;

  .waterfall-last {
    height: 100%;
    display: grid;
    grid-gap: 0.5em;
    grid-auto-flow: row dense;
    grid-auto-rows: auto;
    grid-template-columns: 1fr;

    .waterfall-last-item {
      height: 100%;
      background: transparent;
      overflow: hidden;
      display: flex;
      flex-direction: column;

      .home-container {
        width: 100%;
        background: var(--el-color-white);
        box-shadow: 0 1px 8px 0 rgb(0 0 0 / 6%);
        overflow: hidden;
        border-radius: 0.4em;
      }
    }
  }

  @media (min-width: 576px) and (min-width: 1024px) {
    .waterfall-last {
      grid-template-columns: repeat(24, 1fr);
    }
  }
}

@media (max-width: 576px) {
  .anchor-info-container {
    display: none;
  }
}
</style>
